
import { addElClass } from './util';

/**svg实现的环形进度条*/
function SvgAnnulusloading(tplEl, currentClassName, startDashoffsetPx, ringClassName, defaultEnabled) {
    this.tplEl = tplEl;
    this.enabled = defaultEnabled;
    this.currentClassName = currentClassName;
    this.startDashoffsetPx = startDashoffsetPx;
    this.ringClassName = ringClassName;
    this.el = null;
    this.ringEl = null;
}
SvgAnnulusloading.tmpEl = document.createElement('div');
SvgAnnulusloading.tmpEl.style.display = 'none';

/**初始化并返回当前进度条的dom元素*/
SvgAnnulusloading.prototype.initEl = function () {
    if (this.el) this.el.remove();
    SvgAnnulusloading.tmpEl.innerHTML = this.tplEl.innerHTML;
    this.el = SvgAnnulusloading.tmpEl.getElementsByTagName('svg')[0];
    if (!this.el) throw new Error('not found <svg> in [tplEl]!');
    this.ringEl = this.el.getElementsByClassName(this.ringClassName)[0];
    if (!this.ringEl) throw new Error('not found .' + this.ringClassName + ' in [tplEl].<svg> !');
    this.setEnabled(this.enabled);
    return this.el;
};
/**设置启用或禁用*/
SvgAnnulusloading.prototype.setEnabled = function (enabled) {
    if (!this.el || this.enabled === enabled) return;
    if (enabled) {
        addElClass(this.el, null, this.currentClassName);
    } else {
        addElClass(this.el, this.currentClassName, null);
    }
    this.setPercent(0);
    this.enabled = enabled;
};
/**
 * 设置进度条的百分比
 * @param percent 0~1
*/
SvgAnnulusloading.prototype.setPercent = function (percent) {
    if (percent < 0) percent = 0;
    if (percent > 1) percent = 1;
    //因为0是满的,是倒着来的,所以 1-percent
    var px = this.startDashoffsetPx * (1 - percent);
    this.ringEl.style.strokeDashoffset = px + 'px';
};

export {
    SvgAnnulusloading,

}